

<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="Shortcut Icon" href="http://htmljs.b0.upaiyun.com//images/logo.ico?123"><link href="http://htmljs.b0.upaiyun.com//images/logo.ico?123" rel="shortcut icon" type="image/x-icon"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable = no"/>
<link href="http://htmljs.b0.upaiyun.com//images/icon.png" rel="apple-touch-icon"/>
<meta name="keywords" content="前端, 前端开发, web前端, web前端开发, 前端开发工程师, 前端开发攻城师,设计, 开发, 前端资源, CSS, JavaScript, Ajax, jQuery, html,html5,css3,浏览器兼容, 前端开发工具, 前端招聘, jQuery API, CSS整形和优化工具 , JS压缩工具 , JS格式化工具 , CSS参考手册 ,HTML参考手册 , 多重搜索 , nodejs , node , boostrap , sublime"/>
<script>if($.browser.msie){alert("请不要使用ie浏览本站！本站不支持ie10以下浏览器。")}</script><title>乱炖周刊第五期 - 每周为您推送本站精选的新鲜速递</title><base target="_blank"/><meta name="description" content="前端乱炖每周会为您推送本站精选的新鲜速递。">
<style>
img{
  max-width:100%;
}
p{
  margin:10px 0;
}
a{
  text-decoration: none;
  color:#56b38e;
  font-weight: bold;
  font-family: "微软雅黑";
}
html,body{margin:0;background: #fefefe;font-size: 14px;color:#444;}
*{
  
}
a:hover{
  text-decoration: underline;
}
@media screen and (min-width:100px) and (max-width:650px){
  table{
    width:100% !important;
  }
  body{
    margin:0 5px;
  }
  .wrapper{width:100% !important;overflow: hidden;}
  #googlead{display: none !important;}
  #wx img{width:50%;}
  #WBCommentFrame{
    display: none;
  }
  
}
</style>
</head>

<body>
  <div style="height:40px;background:#eee;color:#fff;line-height:40px;border-bottom:1px solid #ccc;margin:0 -5px;">
    <div style="width: 600px;margin:0 auto;" class="wrapper">
      <a href="http://www.html-js.com" style="color:#333;">前端乱炖官网</a>
      <a href="http://www.html-js.com/static/htmljs-weekly-4.html" style="padding:0 10px;color:#333;">上一期</a>
      <a href="http://www.html-js.com/static/htmljs-weekly-5.html" style="padding:0 5px;color:#333;">在线版</a>
    </div>
  </div>
  <div id="newsletter" style="margin:0;padding:0; color: #333333; font: 13px/20px 'Helvetica Neue',Helvetica,Arial,Sans-serif;font-family:'Hiragino Sans GB','Microsoft YaHei','Helvetica Neue',Helvetica,Arial,sans-serif!important;overflow:hidden;" >
    <div class="wrapper" style="margin: 0px auto 0; width: 600px; padding-top:16px; padding-bottom:10px;">
      <div class="header clearfix" style="font-weight:bold;text-align:left;margin:10px 0;margin-top:20px;font-size:35px;color:#4e9d7e;padding:0px;">乱炖周刊 第五期</div>
      <div style="color:#999;font-size:12px;padding-left:0px;line-height:45px;">主编：芋头</div>
      <div style="">
        
        <div style="float:left;">
          <p style="font-size:14px;margin-top:20px;color:#489275;">推荐给朋友：</p>

          <p style="font-size:13px;">
            <a href="http://service.weibo.com/share/share.php?appkey=659341943&url=http://www.html-js.com/static/htmljs-weekly-5.html&pic=http://htmljs.b0.upaiyun.com/uploads/1407652172242-468AE1E0-B88E-41B4-8A4D-216F16C0AB62.png&title=《乱炖周刊》第五期新鲜出炉啦，《乱炖周刊》是@前端乱炖 网站推出的前端精品文章推送产品，每周为您多渠道推送营养文，前端必备，推荐订阅。戳右边查看在线版→_→" target="_blank" title="分享到微博"><img src="http://htmljs.b0.upaiyun.com/uploads/1393254783476-button1.png" style="width:110px;margin-left:-8px;margin-top:-3px;"/>
            </a>
          </p>
        </div>
        </div>
      </div>
    </div>
  </div>
  <div style="font-size:18px;font-weight:bold;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;border-left:4px solid #4e9d7e;margin-top:20px;padding-left:5px;line-height:20px;">前端乱炖·专栏 本周精品</div>
  <div id="newsletter" >
  <div style="margin: 0px auto 0; width: 600px;padding-top:20px;"  class="wrapper">
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a href="http://www.html-js.com/article/column/50" style="display:inline-block;width:250px;">[ 用Angular开发web应用（29）]</a>by 张小俊128</div>
    <div style="background:#f7f7f7;color:#777;font-size:12px;padding:5px 10px;margin-bottom:10px;">讲述Angular开发框架的基础知识，帮助读者快速学习并深入理解Angular的开发理念和具体应用方式</div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a href="http://www.html-js.com/article/column/98" style="display:inline-block;width:250px;">[ My Code Wars 我的代码战争（19） ]</a>by Bolt_白衣苍狗</div>
    <div style="background:#f7f7f7;color:#777;font-size:12px;padding:5px 10px;margin-bottom:10px;">讲述的是一个8级（kyu）菜鸟立志成为8段（dan）大神的故事。

他在代码战争中一次次遭遇挫败，而又在乱炖中获得高人指点。

遥想当年自高自大，而今终知天外有天。

坚持要走出一条自己的路，这是一条不归路。</div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a href="http://www.html-js.com/article/column/169" style="display:inline-block;width:250px;">[ GitHub不完全装B指南 v2.0（12） ]</a>by GitHub不完全装B指南</div>
    <div style="background:#f7f7f7;color:#777;font-size:12px;padding:5px 10px;margin-bottom:10px;">介绍我自己搜集到的一些优秀开源库，希望通过自己的努力让更多的人认识GitHub，了解GitHub，最后从GitHub中受益！力图用最轻松的方式让大家会用最牛B的库！</div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a href="http://www.html-js.com/article/column/178" style="display:inline-block;width:250px;">[ 迷你MVVM框架avalon沉思录（3） ]</a>by 司徒正美</div>
    <div style="background:#f7f7f7;color:#777;font-size:12px;padding:5px 10px;margin-bottom:10px;">让读者进入MVVM的美丽新世界。avalon，才是MVVM的真正形象，我们前端开发的乐土！</div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a href="http://www.html-js.com/article/column/171" style="display:inline-block;width:250px;">[ Javascript编程指南（18） ]</a>by ELFVision</span></div>
    <div style="background:#f7f7f7;color:#777;font-size:12px;padding:5px 10px;">这是一本开源的Javascript编程指南。内容从最简单的语法基础，到复杂的框架编写、项目自动化，都有覆盖。这本开源书籍大致分为三个部分：Javacsript核心基础、浏览器编程、NodeJS环境编程。也希望大家能共同编写</div>
    <a href="http://www.html-js.com/article" style="line-height:30px;font-size:12px;color:#333;text-decoration:underline;">创建我自己的专栏</a>
  </div>
</div>
  <div style="font-size:18px;font-weight:bold;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;border-left:4px solid #4e9d7e;margin-top:20px;padding-left:5px;line-height:20px;">前端乱炖·原创文章 本周精品</div>
  <div id="newsletter" >
  <div style="margin: 0px auto 0; width: 600px;padding-top:20px;" class="">
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a href="http://www.html-js.com/article/JavaScript-translation-modular-leading-to-a-future-JavaScript-library-path" style="display:inline-block;width:350px;">[ 模块化，通往未来JavaScript库之路 ]</a><span style="display:inline-block;font-size:14px;">  by <span style="display:inline-block;width:100px;">jnotnull</span><span style="padding-left:20px;">✭✭✭✭✩</span></span></div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a href="http://www.html-js.com/article/Search-the-front-end-of-the-car-team-columns-30-lines-of-JS-synchronous-programming-library" style="display:inline-block;width:350px;">[ 30行的JS同步编程库） ]</a><span style="display:inline-block;font-size:14px;">  by <span style="display:inline-block;width:100px;">芋头</span><span style="padding-left:20px;">✭✭✭✭✭</span></span></div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a href="http://www.html-js.com/article/Optimization-of-CSS-XXX-to-optimize-your" style="display:inline-block;width:350px;">[ 优化你的css ]</a><span style="display:inline-block;font-size:14px;">  by <span style="display:inline-block;width:100px;">mdemo</span><span style="padding-left:20px;">✭✭✭✭✭</span></span></div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a href="http://www.html-js.com/article/JavaScript-version-100-lines-of-code-to-achieve-a-modern-version-of-Router" style="display:inline-block;width:350px;">[ 100行代码实现现代版Router ]</a><span style="display:inline-block;font-size:14px;">  by  <span style="display:inline-block;width:100px;">jnotnull</span><span style="padding-left:20px;">✭✭✭✭✭</span></span></div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a href="http://www.html-js.com/article/Using-Angular-to-develop-web-application-of-AngularJS-twoway-data-binding-secret" style="display:inline-block;width:350px;">[ AngularJS 数据双向绑定揭秘 ]</a><span style="display:inline-block;font-size:14px;">  by <span style="display:inline-block;width:100px;">张小俊128</span><span style="padding-left:20px;">✭✭✭✭✩</span></span></div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a href="http://www.html-js.com/article/The-processing-mechanism--Exploration-of-popular-framework-functional-part-of-the-JavaScript-magic-JavaScript-translation" style="display:inline-block;width:350px;">[ JS魔法揭秘--探索流行框架中部分功能的处理机制 ]</a><span style="display:inline-block;font-size:14px;">  by <span style="display:inline-block;width:100px;">jnotnull</span><span style="padding-left:20px;">✭✭✭✭✭</span></span></div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a href="http://www.html-js.com/article/-JavaScript-the-translation-from-reading-18-amazing-places-found-in-the-JQuery-source-code" style="display:inline-block;width:350px;">[ 从阅读JQuery源码中发现的18个惊奇的地方 ]</a><span style="display:inline-block;font-size:14px;">  by <span style="display:inline-block;width:100px;">jnotnull</span><span style="padding-left:20px;">✭✭✭✭✩</span></span></div>
    
  </div>
</div>
  <div style="font-size:18px;font-weight:bold;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;border-left:4px solid #4e9d7e;margin-top:20px;padding-left:5px;line-height:20px;">前端乱炖·招聘季</div>
  <div style="margin: 0px auto 0; width: 600px;padding-top:20px;" class="wrapper">
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a href="http://www.html-js.com/topic/804">[ 阿里巴巴招聘资深前端&前端专家 ]</a></div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a href="http://www.html-js.com/topic/831">[ 极客学院——web前端工程师（10K+++，在线教育）  ]</a></div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a href="http://www.html-js.com/topic/814">[ 上海 招聘 nodejs 后端开发工程师 ]</a></div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a href="http://www.html-js.com/topic/761">[ 【北京】滴滴打车-招聘高级前端开发工程师 ]</a></div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a href="http://www.html-js.com/topic/820">[ 摩点众筹： 高薪急招靠谱前端大牛加盟（12K - 22K） ]</a></div>
    
     <a href="http://www.html-js.com/topic/827" style="line-height:30px;font-size:14px;color:#333;text-decoration:underline;">前端乱炖·商业合作通告</a>
  </div>
<div style="font-size:18px;font-weight:bold;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;border-left:4px solid #4e9d7e;margin-top:20px;padding-left:5px;line-height:20px;">前端乱炖·业内优秀文章精选</div>
<div id="newsletter" >
  <div style="margin: 0px auto 0; width: 600px;padding-top:20px;">
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a style="font-size:14px;display:inline-block;width:450px;" href="http://www.html-js.com/blog/2504">[ 使用cnpm搭建企业内部私有NPM仓库 ]</a></div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a style="font-size:14px;display:inline-block;width:450px;" href="http://www.html-js.com/blog/2530">[ 你应该学习的最好的编程语言 ]</a> </div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a style="font-size:14px;display:inline-block;width:450px;" href="http://www.html-js.com/blog/2527">[ 普通人怎么让自己更努力？(1) ]</a> </div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a style="font-size:14px;display:inline-block;width:450px;" href="http://www.html-js.com/blog/2533">[ 【指南】如何写出好代码 ]</a></div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a style="font-size:14px;display:inline-block;width:450px;" href="https://github.com/vhf/free-programming-books/blob/master/free-programming-books.md">[ 1000本免费编程书 ]</a></div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a style="font-size:14px;display:inline-block;width:450px;" href="http://www.html-js.com/blog/2534">[ 常用Git命令汇总 ]</a> </div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a style="font-size:14px;display:inline-block;width:450px;" href="http://www.html-js.com/blog/2535">[ 前端研发生态环境构建经验谈 ]</a> </div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a style="font-size:14px;display:inline-block;width:450px;" href="http://www.html-js.com/blog/2489">[ canvas的性能优化 ]</a> </div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a style="font-size:14px;display:inline-block;width:450px;" href="http://www.html-js.com/blog/2453">[ 响应式设计：概念与运用 ]</a></div>
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;"><a style="font-size:14px;display:inline-block;width:450px;" href="https://cdnify.com/blog/top-10-gulp-tasks-for-optimising-front-end-performance/">[ Top 10 Gulp Tasks for Optimising Front End Performance ]</a> </div>
    

  </div>
</div>
<div style="font-size:18px;font-weight:bold;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;border-left:4px solid #4e9d7e;margin-top:20px;padding-left:5px;line-height:20px;">微信公众号</div>
    <div style="margin: 0px auto 0; width: 600px;" class="wrapper">
      <img width="250" style="" src="http://htmljs.b0.upaiyun.com/uploads/1394040251862-qrcode.png"/>
      <div style="clear:both;"></div>
    </div>
  </div>
  <div style="font-size:18px;font-weight:bold;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;margin-top:20px;padding-left:5px;line-height:20px;">
 <div style="background: none repeat scroll 0 0 #FFFFFF;  margin: 0px 0 0; padding: 20px 0;">
  <p style="border-top:1px solid #ddd;font-size:12px;padding-top:10px;color:#999;"><a href="http://www.html-js.com">@前端乱炖 </a> 是一个功能丰富的提供高质量内容的技术社区</p>
<p style="border-top:1px solid #ddd;font-size:12px;padding-top:5px;color:#999;">为了确保您能收到及时的通知，请将 postmaster@htmljs.sendcloud.org 添加为联系人。</p>

   </div>
  </div>
</div>
   <script src="http://htmljs.b0.upaiyun.com//js/jquery.js"/></script>
<script>
$("#submit").on("click",function(){
  $.ajax({
    url:"/rss/email",
    type:"post",
    data:{email:$("#email").val()},
    dataType:"json",
    success:function(data){
      if(data.success){
        alert("订阅成功")
        $("#email").val("")
      }else{
        alert(data.info)
      }
    }
    });
  });
</script>

<style>#googlead{position:fixed;bottom:-250px;right:0px;}
</style><div id="googlead" class="hidden"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 弹出广告 -->
<ins class="adsbygoogle"
   style="display:inline-block;width:250px;height:250px"
   data-ad-client="ca-pub-8166279959459646"
   data-ad-slot="1929456950"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div><script>setTimeout(function(){
  $("#googlead").removeClass("hidden").animate({bottom:0})
},3000)</script>
<script>

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36222024-3']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();</script>
  </body>
</html>